<!DOCTYPE html>
<html ng-app="jcs-demo">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular Auto Validate Test Page</title>

    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body>
<div class="row" ng-controller="demoCtrl">
    <div class="col-sm-8 col-sm-offset-1">
        <form role="form" name="testFrm" novalidate="novalidate"
              ng-submit="submit(testFrm);">
            <div class="form-group">
                <label class="control-label">Name</label>
                <input type="text" name="name" class="form-control"
                       ng-model="user.name"
                       placeholder="Enter firstname"
                       ng-required="true"/>

            </div>

            <div class="form-group">
                <label>
                    Are you alive?
                    <input type="checkbox" ng-model="model.isActive" required/>
                </label>
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" ng-model="model.termsAccepted" required/>
                    I accept the terms...
                </label>
            </div>
            <div class="form-group">
                <label>Favourite Colour</label>

                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="Red" ng-model="model.colour"
                               required>
                        Red
                    </label>
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="Green"
                               ng-model="model.colour" required>
                        Green
                    </label>
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios3" value="Blue"
                               ng-model="model.colour" required>
                        Blue
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label>Hair Colour</label>

                <div class="radio">
                    <label>
                        <input type="radio" name="hairColourRadios" id="optionsRadios4" value="Blonde"
                               ng-model="model.hairColour" required>
                        Blonde
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="hairColourRadios" id="optionsRadios5" value="Red"
                               ng-model="model.hairColour" required>
                        Red
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="hairColourRadios" id="optionsRadios6" value="Brown"
                               ng-model="model.hairColour" required>
                        Brown
                    </label>
                </div>
            </div>

            <button type="submit" class="btn btn-default">Submit</button>
            <button type="reset" class="btn btn-default">Reset</button>
        </form>
    </div>
</div>

<script type="text/javascript" src="../bower_components/angular/angular.js"></script>

<!--<script type="text/javascript" src="../dist/jcs-auto-validate.min.js"></script>-->

<script type="text/javascript" src="../src/jcs-auto-validate.js"></script>
<script type="text/javascript" src="../src/providers/validator.js"></script>
<script type="text/javascript" src="../src/services/bootstrap3ElementModifier.js"></script>
<script type="text/javascript" src="../src/services/debounce.js"></script>
<script type="text/javascript" src="../src/services/defaultErrorMessageResolver.js"></script>
<script type="text/javascript" src="../src/services/foundation5ElementModifier.js"></script>
<script type="text/javascript" src="../src/services/validationManager.js"></script>
<script type="text/javascript" src="../src/config/ngSubmitDecorator.js"></script>
<script type="text/javascript" src="../src/config/ngModelDecorator.js"></script>
<script type="text/javascript" src="../src/directives/formReset.js"></script>
<script type="text/javascript" src="../src/directives/autoValidateFormOptions.js"></script>
<script type="text/javascript" src="../src/directives/registerCustomFormControl.js"></script>
<script type="text/javascript" src="../src/jcs-auto-validate-run.js"></script>

<script type="text/javascript">
    (function (angular) {
        var app = angular.module('jcs-demo', ['jcs-autoValidate']);

        app.controller('demoCtrl', [
            '$http',
            '$scope',
            'bootstrap3ElementModifier',
            function ($http, $scope, bootstrap3ElementModifier) {
                $scope.user = {};
                $scope.bs3Icons = false;

                $scope.toggleBS3Icons = function () {
                    $scope.bs3Icons = !$scope.bs3Icons;
                    bootstrap3ElementModifier.enableValidationStateIcons($scope.bs3Icons);
                };

                $scope.resetFormViaEvent = function () {
                    $scope.$broadcast('form:testFrm:reset');
                };

                $scope.submit = function (frmCtrl) {
                    //frmCtrl.autoValidateFormOptions.resetForm();

                    alert('submitted');
                    $http.post('https://api.app.com/users', $scope.user).then(function (response) {
                        if (response.data.validationErrors) {
                            angular.forEach(response.data.validationErrors, function (error) {
                                frmCtrl.setExternalValidation(error.key, error.messageKey, error.message);
                            })
                        }
                    });
                };

                $scope.setExternalError = function (frm) {
                    frm.setExternalValidation('firstname', undefined, 'hello joe');
                };

                $scope.toggleBS3Icons();
            }
        ]);

        app.run([
            'defaultErrorMessageResolver',
            function (defaultErrorMessageResolver) {
                defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
                    errorMessages['nonUniqueId'] = 'This id is already taken plus choose another';
                });
            }
        ]);

        app.factory('myCustomElementModifier', [
            function () {
                var /**
                         * @ngdoc function
                         * @name myCustomElementModifier#makeValid
                         * @methodOf myCustomElementModifier
                         *
                         * @description
                         * Makes an element appear valid by apply custom styles and child elements.
                         *
                         * @param {Element} el - The input control element that is the target of the validation.
                         */
                        makeValid = function (el) {
                            el.removeClass('bg-red');
                            el.addClass('bg-green');
                        },

                        /**
                         * @ngdoc function
                         * @name myCustomElementModifier#makeInvalid
                         * @methodOf myCustomElementModifier
                         *
                         * @description
                         * Makes an element appear invalid by apply custom styles and child elements.
                         *
                         * @param {Element} el - The input control element that is the target of the validation.
                         * @param {String} errorMsg - The validation error message to display to the user.
                         */
                        makeInvalid = function (el, errorMsg) {
                            el.removeClass('bg-green');
                            el.addClass('bg-red');
                        };

                return {
                    makeValid: makeValid,
                    makeInvalid: makeInvalid,
                    key: 'myCustomModifierKey'
                };
            }
        ]);

        // now register the custom element modifier with the auto-validate module and set it as the default one for all elements
        app.run([
            'validator',
            'myCustomElementModifier',
            'defaultErrorMessageResolver',
            function (validator, myCustomElementModifier, defaultErrorMessageResolver) {
                validator.registerDomModifier(myCustomElementModifier.key, myCustomElementModifier);
                defaultErrorMessageResolver.setI18nFileRootPath('../src/lang/');
                defaultErrorMessageResolver.setCulture('en-gb');

                defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
                    errorMessages['pattern'] = 'Custom Error Message {0}';
                    errorMessages['mustcontainword'] = 'Please enter the word "{0}"';
                    errorMessages['nameRequired'] = 'Please enter your name';
                });
            }
        ]);
    }(angular));
</script>
</body>
</html>